<script setup lang="ts">
  import { useDrop } from 'vue3-dnd'
  import { computed, ref, unref } from 'vue'
  import { toRefs } from '@vueuse/core'

  const props = defineProps<{
    dropItem: {
      name: string,
      id: string,
      dropId: string
    }
  }>()

  const showItem = ref(props.dropItem)

  const [collect, drop] = useDrop(() => ({
    accept: "itemBox",
    // return的数据会挂在到drag的monitor.getDropResult上面
    drop: (item) => {
      console.log("drop-item", item)
      showItem.value = props.dropItem
      return {
        name: showItem.value.name,
        id: showItem.value.id,
        dropId: showItem.value.dropId
      }
    },
    // collect的数据会挂载到collect参数上
    collect: monitor => ({
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop(),
    }),
  }))
  const { canDrop, isOver } = toRefs(collect)
  const isActive = computed(() => unref(canDrop) && unref(isOver))
  const backgroundColor = computed(() =>
    unref(isActive) ? 'red' : unref(canDrop) ? 'green' : '#8a8a8a'
  )

  const closeBox = (res) => {
    emit("closeBox", res)
  }

  const emit = defineEmits(["closeBox"])
</script>

<template>
  <div class="dropBox" :ref="drop" :style="{ backgroundColor }">
    <div>{{ isActive ? 'Release to drop' : '可以放置区域' }}</div>
    <div>{{ showItem.name ? showItem.name : "无内容" }}</div>
    <div class="closeBtn" :data-item="dropItem" @click="closeBox(dropItem)">关闭</div>
  </div>
</template>

<style lang="scss" scoped>
  .dropBox {
    border: 1px dashed black;
    padding: 20px;
    color: #fff;
    width: 200px;
    height: 150px;
  }
  .closeBtn {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
  }
</style>